<template>
	<!-- 查看修改预约时间详情页 -->
	<div id="NewManagementDetail">
		<h2 style="margin-bottom: 10px">修改预约时间详情页</h2>
		<div class="content" style="height: 800px">
			<el-form class="table" ref="form" :model="form" label-width="80px">
				<el-form-item label="预约时间:">
					<el-col>
						<el-time-select
							placeholder="起始时间"
							v-model="startTime"
							:picker-options="{
								start: '08:30',
								step: '00:15',
								end: '18:30'
							}"
						></el-time-select>
						<el-time-select
							style="margin-left: 10px"
							placeholder="结束时间"
							v-model="endTime"
							:picker-options="{
								start: '08:30',
								step: '00:15',
								end: '18:30',
								minTime: startTime
							}"
						></el-time-select>
					</el-col>
				</el-form-item>
				<el-form-item label="预约日期:">
					<el-col>
						<el-date-picker
							type="dates"
							v-model="date"
							placeholder="选择一个或多个日期"
							format="yyyy 年 MM 月 dd 日"
							value-format="yyyy-MM-dd"
						></el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="预约授权:">
					<el-checkbox
						:indeterminate="isIndeterminate"
						v-model="checkAll"
						@change="handleCheckAllChange"
					>
						全选
					</el-checkbox>
					<div style="margin: 15px 0"></div>
					<el-checkbox-group v-model="checkedAdmins" @change="handleCheckedCitiesChange">
						<el-checkbox v-for="city in admins" :label="city" :key="city">{{ city }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
const adminOptions = ['校管理员', '校长', '老师', '班主任', '学生', '家长']
export default {
	data() {
		return {
			form: {},
			startTime: '',
			endTime: '',
			checkAll: false,
			checkedAdmins: ['校管理员'],
			admins: adminOptions,
			isIndeterminate: true,
			date: ''
		}
	},
	methods: {
		// 全选按钮
		handleCheckAllChange(val) {
			this.checkedAdmins = val ? adminOptions : []
			this.isIndeterminate = false
		},
		// 单选按钮
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length
			this.checkAll = checkedCount === this.admins.length
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.admins.length
		},
		// 保存
		onSubmit() {
			const time = this.startTime + '-' + this.endTime
      const date = this.date
      const checkedAdmins = this.checkedAdmins
			console.log('点击保存', time, date, checkedAdmins)
		}
	}
}
</script>

<style lang="scss" scoped>
</style>